<!-- 页面：例如 pages/index/index.vue -->
<template>
  <view class="page-container"  v-if="tabStore.getUserRole=='' || tabStore.getUserRole==undefined || tabStore.getUserRole==null">
		<!-- 功能网格布局 -->
		<gridMenu :gridItems="gridItems" count="4" ptop="70rpx" mbottom="50rpx" gap="0px" />
	</view>

</template>

<script setup>
import {
	health_consultation_itemsApi
} from "@/api/health"
import gridMenu from "@/components/grid-menu/index"

	
import {
		ref,
		onMounted,
		computed,
		nextTick
		} from 'vue';
	import {
		useRouter
	} from 'uni-mini-router'
	

	import {
		useTabStore
	} from '@/stores/tabs'
	import {
		ROLE_TABS
	} from "@/config/roles"
import { defualt_grid_items } from "@/utils/enmuText";

	const tabStore = useTabStore()
	const router = useRouter();
	
	// ✅ 计算当前角色的 tabs
	const currentTabs = computed(() => {
		const role = tabStore.getUserRole
		return ROLE_TABS[role]?.tabs || ROLE_TABS['default']?.tabs || []
	})
	
	// ✅ Tab 点击处理
	const onTabChange = (tab) => {
		nextTick(()=>{
		router.pushTab({
			name: tab.key
		}) 	
		})
	}

// 列表数据
const list = ref([])



// 健康咨询数据（仅保留内容字段）
const healthItems = ref([]);


const gridItems = ref([]);




// 模拟数据（新增 desc 字段）
onMounted(() => {
    gridItems.value=defualt_grid_items;
  list.value = [
    {
      id: 1,
      icon: 'icon-dingdan',
      title: '今日预约情况',
      name:"doctor_todayStatus"
    },
    {
      id: 2,
      icon: 'icon-yaodian',
      title: '绑定者健康情况',
      name:"doctor_healthStatus"
    },
    {
      id: 3,
      icon: 'icon-jiankang',
      title: '咨询情况',
      name:"doctor_customerStatusDetail"
    },
  ];

  	health_consultation_itemsApi().then((res) => {
		console.log("res:", res.data)
		if (res.code == 200) {
			healthItems.value = [...res.data];
		}
	})
  
})


</script>

<style scoped lang="less">
@import '@/static/styles/colors.less';
@import '@/static/styles/constants.less';
@import '@/static/styles/volunteer/home/index.less';

@icon-color: #007aff; // 图标主题色
@text-color: #333; // 文字颜色
@item-height: 140rpx; // 增加高度以容纳详情
@border-color: #e5e5e5;

.parent-container {
  min-height: 100vh;
  padding: 30rpx 0;
}

.list {
  padding: 0 30rpx;
}

.list-item {
  display: flex;
  align-items: center;
  height: @item-height;
  border-radius: @layout-border-radius-sm;
  padding: 0rpx 30rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border: 1rpx solid @color-border-dark;
  position: relative;

  &:active {
    transform: scale(0.98);
    opacity: 0.8;
  }

  .item-left {
    width: 60rpx;
    text-align: center;
    margin-right: 24rpx;

    .iconfont {
      font-size: @h1-size;
      color: @icon-color;
    }
  }

  .item-content {
    flex: 1;
    overflow: hidden;
  }

  .item-title {
    font-size: @h5-size;
    color: @color-text-dark;
    font-weight: 500;
    line-height: 1.4;
    display: block;
  }

  .item-desc {
    font-size: @h6-size;
    color: @color-text-secondary;
    line-height: 1.4;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4rpx;
  }

  .item-arrow {
    // font-size: 36rpx;
    color: @color-text-placeholder;
    margin-left: auto;
    transform: rotate(0deg);
    transition: transform 0.3s;
  }
}
</style>